<template>
    <div>
        <el-card shadow="never">
       <div class="edu-page-title"><h2>我的导师</h2></div>
       <hr />
       <div v-if="!(detailForm.id)" align="center">您目前没有导师</div>
       <div v-else>
      <el-form :model="detailForm" ref="detailForm" label-width="120px" label-suffix=":">
        <el-row>
          <el-col :span="4" >
              <div align="center" class="avatar-uploader">
                <img  :src="detailForm.face" class="avatar">
              </div>
          </el-col>
          <el-col :span="20">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工号" prop="teacherCode">
                    <span>{{detailForm.teacherCode}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" prop="teacherName">
                    <span>{{detailForm.teacherName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="sex" >
                    <span>{{detailForm.sexI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职称" prop="title">
                    <span>{{detailForm.titleI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="人事所属学院" prop="personnelCollege">
                   <span>{{detailForm.personnelCollegeI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="导师所属学院" prop="faculty" >
                    <span>{{detailForm.facultyI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业" prop="major" v-if="tutorType ==2">
                  <span>{{detailForm.majorI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学堂" prop="faculty" v-if="tutorType ==1">
                  <span>{{detailForm.school}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属类" prop="major" v-if="tutorType ==1">
                    <span>{{detailForm.majorI18n}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态" prop="status">
                   <span>{{detailForm.status == 1 ? '有效':'无效'}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="办公电话" prop="officePhone" >
                    <span>{{detailForm.officePhone}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="telePhone" >
                   <span>{{detailForm.telPhone}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电子邮箱" prop="email">
                    <span>{{detailForm.email}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="聘用年度" prop="grade">
                  <span>{{transGrade(detailForm.grade)}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="导师简介" prop="introduce">
                    <div style=" width:100%;word-break:break-all;">{{detailForm.introduce}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark" >
                    <div style=" width:100%;word-break:break-all;">{{detailForm.remark}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-col>
        </el-row>
      </el-form>
      </div>
     </el-card>
    </div>
</template>
<script>
import APIs from "common/src/api/welcomeService/tutorList"
// 本科生导师详情
    export default{
        name: "TutorDetail",
        props: ["tutorType"],
        mounted() {
            this.searchList();
        },
        data() {
            return {
              defaultPhoto: "/static/images/icon_photo.png",
              detailForm:{},
            }
        },
        methods:{
           searchList(){
              APIs.myTutor(this.tutorType).then(res =>{
                if(res.code==200){
                  this.detailForm=res.data;
                  this.findPicture(this.detailForm.photo);
                }
              });
           },
           findPicture(imgUrl){
              if(imgUrl){
                APIs.findPicture(imgUrl).then(res =>{
                if(res.code==200 && res.data){
                    this.detailForm.face = res.data.base;
                  }
                });
              }else{
                this.detailForm.face=defaultPhoto
              }
           },
            transGrade (data){
              if(data){
                return data+'-'+(data+1)+'年度'
              }else{
                return ""
              }
            }
        }
    }
</script>
<style lang="scss" >
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>